<template>
  <div>
    <div>
      <!--<el-button @click="delhot('删除')">删除</el-button>-->
      <el-button @click="delhot('屏蔽')">屏蔽</el-button>
      <el-button @click="delhot('解除屏蔽')">解除屏蔽</el-button>
      <el-button @click="addContent">搜索&nbsp;<i :class="{active: show1 === true}" class="iconfont icon-zhankai" style="font-size: 12px"/></el-button>
    </div>
    <el-collapse-transition>
      <div v-show="show1">
        <div class="main-box">
          <span>用户状态</span>
          <el-radio-group v-model="radio3">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="0">不可用</el-radio>
            <el-radio :label="2">全部</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box">
          <span>用户昵称</span>
          <el-input v-model="input21" placeholder="请输入昵称" prefix-icon="el-icon-search" size="mini"/>
        </div>
        <div class="main-box main-search">
          <span>用户手机</span>
          <el-input v-model="input22" placeholder="请输入手机号" prefix-icon="el-icon-search" size="mini"/>
          <span style="margin-left: 100px"><el-button @click="addSearch">查询</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list
      :table-data="tableData"
      :title="title"
      :btntype="btntype"
      :pagesall="pagesall"
      :pages="pages"
      @changepage="changepage"
      @getid="getid"
      @getselect="getselect"/>
    <div v-show="reasonshow" class="layer">
      <div class="mask" @click="reasonshow = false"/>
      <div class="content">
        <span class="close" @click="reasonshow = false"><i class="iconfont icon-untitled94"/></span>
        <p v-show="type === true" class="title">删除的理由</p>
        <p v-show="type === false" class="title">屏蔽的理由</p>
        <p v-show="type === -1" class="title">解除屏蔽的理由</p>
        <div class="doit">
          <div class="one">
            <el-input
              :autosize="{ minRows: 2, maxRows: 20}"
              v-model="deletes.reason"
              type="textarea"/>
          </div>
          <div class="buttons">
            <el-button size="mini" @click="deleteanswer">确定</el-button>
            <el-button size="mini" @click="reasonshow = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="seecontent" class="layer">
      <div class="mask" @click="seecontent = false"/>
      <div class="content" style="width: 500px">
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"/></span>
        <p class="title"><span><img :src="questionview.head_img" alt=""></span></p>
        <div style="margin-top: 30px;" class="main-all">
          <p>id: <span>{{ questionview.id }}</span></p>
          <p>性别: <span>{{ sex }}</span></p>
          <p>昵称: <span>{{ questionview.nickname }}</span></p>
          <p>签名: <span>{{ questionview.collect }}</span></p>
          <p>简介: <span>{{ questionview.profile }}</span></p>
          <p>城市: <span>{{ questionview.city }}</span></p>
          <p>邮箱: <span>{{ questionview.email }}</span></p>
          <p>手机: <span>{{ questionview.mobile }}</span></p>
          <p>作家: <span>{{ isauthor }}</span></p>
          <p>大咖: <span>{{ isanswer }}</span></p>
          <p>用户名: <span>{{ questionview.username }}</span></p>
          <p>粉丝数: <span>{{ questionview.fans_num }}</span></p>
          <p>关注数: <span>{{ questionview.focus_num }}</span></p>
          <p>答题金: <span>{{ questionview.answer_worth }}</span></p>
          <p>答题统计: <span>{{ questionview.answer_num }}</span></p>
          <p>文章统计: <span>{{ questionview.article_num }}</span></p>
          <p>被标记有用数: <span>{{ questionview.use_num }}</span></p>
          <p>被标记喜欢数: <span>{{ questionview.like_num }}</span></p>
          <p>被提问统计数: <span>{{ questionview.q_count }}</span></p>
          <p>被提问后回答数: <span>{{ questionview.a_count }}</span></p>
          <p>用户登陆次数: <span>{{ questionview.login_num }}</span></p>
          <p>用户注册时间: <span>{{ questionview.register_time }}</span></p>
          <p>最近登陆时间: <span>{{ questionview.login_time }}</span></p>
          <p>最近登陆IP地址: <span>{{ questionview.login_ip }}</span></p>
          <p>用户状态: <span>{{ enable }}</span></p>
          <p>
            <el-button v-show="isanswer === '否'" @click="addType('设置大咖')">设置大咖</el-button>
            <el-button v-show="isanswer === '是'" @click="addType('取消大咖')">取消大咖</el-button>
            <el-button v-show="isauthor === '否'" @click="addType('设置专栏作者')">设置专栏作者</el-button>
            <el-button v-show="isauthor === '是'" @click="addType('取消作者')">取消专栏作者</el-button>
          </p>
          <p/>
        </div>
      </div>
    </div>
    <!-- 设置有用数/喜欢数 -->
    <div v-show="likeShow" class="layer">
      <div class="mask" @click="likeShow = false"/>
      <div class="content" style="overflow: hidden">
        <span class="close" @click="likeShow = false"><i class="iconfont icon-untitled94"/></span>
        <p class="title">设置</p>
        <div style="margin-top: 20px;">
          <span style="float: left;">预设有用数:</span>
          <span style="float: left;"><el-input v-model="usefulVal" placeholder="请输入有用数" size="mini"/></span>
        </div>
        <div class="clear"/>
        <div style="margin-top: 20px;">
          <span style="float: left;">预设喜欢数:</span>
          <span style="float: left;"><el-input v-model="likeVal" placeholder="请输入喜欢数" size="mini"/></span>
        </div>
        <div class="clear"/>
        <div class="main-box" style="margin-top: 50px;margin-bottom: 50px;">
          <span style="margin-left: 50px;"><el-button @click="sureSet">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="likeShow = false">取消</el-button></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import MsgList from '../public/msgList'

export default {
  name: 'UserIndex',
  components: { MsgList },
  data() {
    return {
      usefulVal: '',
      likeVal: '',
      likeShow: false,
      radio3: '',
      reasonshow: false,
      usernames: '',
      seecontent: false,
      input21: '',
      imgurl: '',
      input22: '',
      show1: false,
      type: true,
      aaa: true,
      deletes: {
        ids: [],
        reason: ''
      },
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'username',
          label: '用户名'
        },
        {
          prop: 'nickname',
          label: '用户昵称'
        },
        {
          prop: 'sex',
          label: '性别'
        },
        {
          prop: 'mobile',
          label: '手机'
        },
        {
          prop: 'email',
          label: '邮箱'
        },
        {
          prop: 'enabled',
          label: '状态'
        },
        {
          prop: 'answer_worth',
          label: '答题金'
        },
        {
          prop: 'isauthor',
          label: '作家'
        },
        {
          prop: 'isanswer',
          label: '大咖'
        },
        {
          prop: 'answer_num',
          label: '答题统计'
        },
        {
          prop: 'use_num',
          label: '标记有用'
        },
        {
          prop: 'article_num',
          label: '文章统计'
        },
        {
          prop: 'like_num',
          label: '被喜欢'
        }
      ],
      tableData: [],
      btntype: ['查看详情', '查看主页', '设置'],
      pagesall: 1,
      pages: 1,
      listpage: 1,
      questionview: {},
      enable: '',
      isanswer: '',
      isauthor: '',
      sex: '',
      vid: ''
    }
  },
  watch: {
    enable() {
      if (parseInt(this.enable) === 1) {
        this.enable = '可用'
      }
      if (parseInt(this.enable) === 0) {
        this.enable = '不可用'
      }
    },
    isanswer() {
      if (parseInt(this.isanswer) === 1) {
        this.isanswer = '是'
      }
      if (parseInt(this.isanswer) === 0) {
        this.isanswer = '否'
      }
    },
    isauthor() {
      if (parseInt(this.isauthor) === 1) {
        this.isauthor = '是'
      }
      if (parseInt(this.isauthor) === 0) {
        this.isauthor = '否'
      }
    },
    sex() {
      if (parseInt(this.sex) === 1) {
        this.sex = '男'
      }
      if (parseInt(this.sex) === 0) {
        this.sex = '保密'
      }
      if (parseInt(this.sex) === 2) {
        this.sex = '女'
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    sureSet() {
      const that = this
      this.$g.ajax({
        path: 'users/setpre',
        method: 'post',
        data: {
          user_id: that.vid,
          use_preview: that.usefulVal,
          like_preview: that.likeVal
        },
        cbSuccess: function(data) {
          that.$message.success('设置成功')
          that.likeShow = false
          that.getList()
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    getLike() {
      const that = this
      this.$g.ajax({
        path: 'users/getpreview',
        method: 'post',
        data: {
          user_id: that.vid
        },
        cbSuccess: function(data) {
          that.usefulVal = data.memo.use_preview
          that.likeVal = data.memo.like_preview
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    changepage(val) {
      this.listpage = val
      this.getList()
    },
    getid(val) {
      if (val.btn === '查看详情') {
        this.seecontent = true
        this.vid = val.val.id
        this.getview()
        this.usernames = val.val.nickname
      } else if (val.btn === '设置') {
        this.vid = val.val.id
        this.getLike()
        this.likeShow = true
      } else {
        window.open('https://www.inkankan.com/users/articlesl/' + val.val.username)
      }
    },
    getview() {
      const that = this
      this.$g.ajax({
        path: 'Users/view/' + this.vid,
        method: 'get',
        cbSuccess: function(data) {
          that.questionview = data.memo
          that.enable = data.memo.enabled
          that.isauthor = data.memo.isauthor
          that.isanswer = data.memo.isanswer
          that.sex = data.memo.sex
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    addContent() {
      this.show1 = !this.show1
    },
    addSearch() {
      this.listpage = 1
      this.getList()
    },
    getselect(vals) {
      this.deletes.ids = []
      for (const i in vals) {
        this.deletes.ids.push(vals[i].id)
      }
    },
    addType(type) {
      const that = this
      this.$confirm('确定' + type + '选中的用户吗?', '提示', {
        confirmButtonText: type,
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (type === '设置大咖') {
          this.$g.ajax({
            path: 'Users/setAnswer/1',
            method: 'post',
            data: {
              id: that.vid
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.$message.success('成功')
              for (const j in that.tableData) {
                if (parseInt(that.vid) === parseInt(that.tableData[j].id)) {
                  that.tableData[j].isanswer = 1
                }
              }
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (type === '取消大咖') {
          this.$g.ajax({
            path: 'Users/setAnswer/0',
            method: 'post',
            data: {
              id: that.vid
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.$message.success('成功')
              for (const j in that.tableData) {
                if (parseInt(that.vid) === parseInt(that.tableData[j].id)) {
                  that.tableData[j].isanswer = 0
                }
              }
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (type === '设置专栏作者') {
          this.$g.ajax({
            path: 'Users/setAuthor/1',
            method: 'post',
            data: {
              id: that.vid
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.$message.success('成功')
              for (const j in that.tableData) {
                if (parseInt(that.vid) === parseInt(that.tableData[j].id)) {
                  that.tableData[j].isauthor = 1
                }
              }
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (type === '取消作者') {
          this.$g.ajax({
            path: 'Users/setAuthor/0',
            method: 'post',
            data: {
              id: that.vid
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.$message.success('成功')
              for (const j in that.tableData) {
                if (parseInt(that.vid) === parseInt(that.tableData[j].id)) {
                  that.tableData[j].isauthor = 0
                }
              }
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + type
        })
      })
    },
    delhot(type) {
      if (this.deletes.ids.length < 1) {
        this.$message({
          type: 'error',
          message: '请选择需要操作的数据'
        })
      } else {
        this.$confirm('确定' + type + '选中的用户吗?', '提示', {
          confirmButtonText: type,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.reasonshow = true
          if (type === '删除') {
            this.type = true
          }
          if (type === '屏蔽') {
            this.type = false
          }
          if (type === '解除屏蔽') {
            this.type = -1
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + type
          })
        })
      }
    },
    deleteanswer() {
      const that = this
      if (this.deletes.reason.length > 255) {
        this.$message.error('理由请控制在255字段以内')
      } else if (this.deletes.reason.length < 1) {
        this.$message.error('理由不能为空')
      } else {
        const msg = that.deletes
        if (this.type === true) {
          this.$g.ajax({
            path: 'Articles/delete',
            method: 'post',
            data: msg,
            cbSuccess: function(data) {
              that.reasonshow = false
              for (const i in msg.ids) {
                for (const j in that.tableData) {
                  if (parseInt(msg.ids[i]) === parseInt(that.tableData[j].id)) {
                    that.tableData.splice(j, 1)
                  }
                }
              }
              that.deletes.reason = ''
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.type === false) {
          this.$g.ajax({
            path: 'Users/setEnabled/0',
            method: 'post',
            data: msg,
            cbSuccess: function(data) {
              that.reasonshow = false
              for (const i in msg.ids) {
                for (const j in that.tableData) {
                  if (parseInt(msg.ids[i]) === parseInt(that.tableData[j].id)) {
                    that.tableData[j].enabled = 0
                  }
                }
              }
              that.deletes.reason = ''
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.type === -1) {
          this.$g.ajax({
            path: 'Users/setEnabled/1',
            method: 'post',
            data: msg,
            cbSuccess: function(data) {
              that.reasonshow = false
              for (const i in msg.ids) {
                for (const j in that.tableData) {
                  if (parseInt(msg.ids[i]) === parseInt(that.tableData[j].id)) {
                    that.tableData[j].enabled = 1
                  }
                }
              }
              that.deletes.reason = ''
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }
    },
    // 获取列表
    getList() {
      const that = this
      this.$g.ajax({
        path: 'Users/index/' + that.listpage,
        method: 'post',
        data: {
          nickname: that.input21,
          enabled: that.radio3,
          mobile: that.input22
        },
        cbSuccess: function(data) {
          that.tableData = data.memo.list
          that.pages = parseInt(data.memo.page)
          that.pagesall = parseInt(data.memo.pageTotal)
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-all p {
  padding-bottom: 10px;
  color: #666;

  span {
    color: #000 !important;
    margin-left: 5px;
  }
}

.add-headimg img {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  vertical-align: text-bottom;
}

.active {
  display: inline-block;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.el-button {
  padding: 8px 14px;
}

.main-box {
  margin-top: 20px;

  span {
    margin-right: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #606266;
  }
}

.main-box {
  .el-radio__input.is-checked + .el-radio__label {
    color: #00a4a0 !important;
  }
}

.main-table {
  /*margin-top: 20px;*/
}

.add-title {
  text-align: center;
  font-size: 20px;
}

.el-input {
  width: 300px;
  line-height: 32px;
  border-radius: 10px;
}

.el-input::placeholder {
  font-size: 20px;
}

.main-search {
  .el-input__inner {
    border-radius: 20px !important;
    height: 32px;
    line-height: 32px;
  }

  .el-input__icon {
    line-height: 32px;
  }

  .el-button {
    padding: 11px 20px;
  }
}

.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: #00a4a0;
}

.addcontent {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.addcontent-one {
  width: 960px;
  padding: 30px;
  margin: 10% auto;
  background: #fff;
}

.layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;

  .mask {
    background: rgba(153, 153, 153, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  .content {
    position: relative;
    width: 300px;
    background: #fff;
    margin: 5% auto;
    z-index: 2;
    padding: 30px;
    overflow-y: scroll;
    max-height: 60%;

    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }

    .title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;

      img {
        max-height: 100px;
        max-width: 100px;
      }
    }

    .doit .one .el-input {
      width: 200px;
      margin-left: 20px;
    }

    .doit .one {
      margin-top: 20px;
      font-size: 14px;
    }

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      position: relative;
      left: -4px;
    }

    .buttons {
      margin-top: 20px;
      text-align: center;

      button {
        margin: 0 20px;
      }
    }
  }
}
</style>
